<template>
  <div class="right-board">
    <Transition
      appear
      enter-active-class="animate__animated animate__fadeInRight"
    >
      <el-tabs
        v-model="currentTab"
        class="center-tabs"
      >
        <div>
          <h3 style="margin: 20px">{{ $t("formgen.rightPanel.attribute") }}</h3>
        </div>

        <div class="field-box">
          <el-scrollbar class="right-scrollbar">
            <form-item-config
              v-if="showField && activeData"
              :active-data="activeData"
              :form-conf="formConf"
              :fields="fields"
              @add-fields="handleAddFields"
              @data-change="dataChange"
            />
            <el-empty
              v-else
              :description="$t('formgen.rightPanel.noItem')"
            />
          </el-scrollbar>
        </div>
      </el-tabs>
    </Transition>
  </div>
</template>

<script setup>
import FormItemConfig from "./FormItemConfig.vue";
import { ref } from "vue";

defineProps({
  showField: {
    type: Boolean,
    default: false
  },
  activeData: {
    type: Object
  },
  formConf: {
    type: Object
  },
  fields: {
    type: Array
  }
});
const currentTab = ref("FormItem");

const emit = defineEmits(["data-change", "add-fields"]);

const dataChange = val => {
  emit("data-change", val);
};

const handleAddFields = val => {
  emit("add-fields", val);
};
</script>
<style lang="scss">
@import "animate.css";
</style>

<style lang="scss" scoped>
@import "../../../assets/styles/right";
.v-enter-active,
.v-leave-active {
  transition: opacity 5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
